<extend name="./public/frame.html"/>
<block name="content">
    <div class="layui-inline">
        <select class="layui-input" lay-verify="required" lay-filter="group" id="group" style="width: 200px;">
            <option value="">权限组名</option>
            <volist name="groups" id="group">
                <option value="{$key}">{$group}</option>
            </volist>
        </select>
    </div>
    <div class="layui-inline">
        <button class="layui-btn" data-type="search">搜索</button>
        <button class="layui-btn layui-btn-disabled" data-type="" id="reset">复位</button>
        <button class="layui-btn layui-btn-warm" data-type="add">添加权限</button>
    </div>
    <table class="layui-table" lay-filter="right" id="right"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">详细</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
    <script>
        layui.use(['table', 'layer', 'form'], function () {
            var layer = layui.layer;
            var table = layui.table;
            var form = layui.form;
            var tableIns = table.render({
                elem:"#right",
                url:"{$url}",
                cols: [[
                    {checkbox:true,title:"",fixed: true},
                    {field:'id',title:"ID", width:80,sort: true},
                    {field:'name',title:"名称", width:180},
                    {field:'kval',title:"所属分组", width:120,align:'center'},
                    {field:'right',title:"权限码", width:300},
                    {title:"操作",toolbar: '#barDemo',width:180,fixed:'right',align:'center'}
                ]],
                page:true,
                limit:10,
                done: function(res, curr, count){
                    _cur_page = curr;
                    _cur_limit = res['limit'];
                    _count = count;
                }
            });
            //监听工具条
            table.on('tool(right)', function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var id = data.id;
                if (layEvent === 'del') {
                    layer.confirm('确认删除该权限么',{icon:3}
                        ,function (index, layero) {
                            $.post('/admin/System/right_del',{del_id:id},function (res) {
                                switch (res['status']){
                                    case 1:
                                        obj.del();
                                        break;
                                    default:
                                        layer.alert(res['msg'],{icon: 5});
                                        break;
                                }
                            },'json')
                        });
                }
                else if(layEvent === 'edit'){
                    layer.open({
                        type: 2,
                        title: '编辑权限',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/System/right_edit","id=")}' + id + "&type="+data.type, //iframe的url
                        cancel: function (index, layero) {
                            table_r(tableIns);
                        }
                    });
                }
                else if(layEvent === 'detail'){
                    layer.open({
                        type: 2,
                        title: data.name+'的权限详情',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/System/right_detail","id=")}' + id //iframe的url
                    });
                }
            });
            var $ = layui.jquery, active = {
                search: function () {
                    var group = $('#group').val();
                    var reset = $('#reset');
                    if(group){
                        reset.removeClass('layui-btn-disabled').addClass('layui-btn-normal').data('type', 'reset');
                        tableIns.reload({
                            where: {group : group} //设定异步数据接口的额外参数
                        });
                    }else{
                        reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                        layer.alert('搜索项不能为空');
                    }
                }
                , reset: function () {
                    var reset = $('#reset');
                    if (reset.data('type') !== '') {
                        tableIns.reload({where:{}});
                    }
                    $('.layui-input').each(function () {                        $(this).val('');                    });                $('.layui-this').each(function () {$(this).removeClass('layui-this');});
                    reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                }
                ,add: function () {
                    layer.open({
                        type: 2,
                        title: '添加权限',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/System/right_edit")}', //iframe的url
                        cancel: function (index, layero) {
                            table_r(tableIns);
                        }
                    });
                }
            };
            $('.layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
</block>
